<template>
	<view class="pb130 bf">
		<!-- <view class="tabs dfa f16">
			<view class="tab tac f-c-c" :class="current == i?'isTab':''" v-for="(v,i) in tabs" :key="i"
				:style="{color:current === i?'#000':'#666'}" @click="handTab(v,i)">{{v.name}}
				<view class="line" :style="{background: current === i?subColor:'#fff'}"></view>
			</view>
		</view> -->
		<view class="f-bt f-y-c bf p2">
			<view class="f-g-1">
				<u-input placeholder="请输入分类名称" v-model="queryForm.name" @change="fetchData" prefixIcon="search"
					shape="circle" prefixIconStyle="font-size: 22px;color: #666;margin-right:10rpx;padding-left:10px"
					placeholderStyle="color:#666" customStyle="background:#f8f8f8;padding:15rpx 5rpx;" border="none"
					clearable>
				</u-input>
			</view>
		</view>
		<view class="uni-container mt10">
			<uni-table ref="table" border stripe emptyText="暂无明细" v-if="current==0">
				<uni-tr>
					<uni-th align="center">id</uni-th>
					<uni-th align="center">分类名称</uni-th>
					<!-- <uni-th align="center">分类图标</uni-th>
					<uni-th align="center">分类标签</uni-th>
					<uni-th align="center">商品数量</uni-th>
					<uni-th align="center">创建时间</uni-th> -->
					<uni-th align="center">操作</uni-th>
				</uni-tr>
				<uni-tr v-for="(row, i) in list" :key="i">
					<uni-td align="center">{{ row.id }}</uni-td>
					<uni-td align="center">
						<view class="name">{{ row.name }}</view>
						<view class="f12 c6">
							<view v-if="row.isMust==1" class="r_logo">必选分组</view>
							<view v-if="row.salesTimeSwitch==1" class="tags">分时段销售</view>
						</view>
					</uni-td>
					<!-- <uni-td align="center">
						<view class="f-c">
							<image class="pplg" :src="row.logo" mode="" />
						</view>
					</uni-td>
					<uni-td align="center">
						<view v-if="row.label">{{ row.label && row.label.name }}</view>
					</uni-td>
					<uni-td align="center">{{ row.goods_count }}</uni-td>
					<uni-td align="center">{{ row.created_at }}</uni-td> -->
					<uni-td align="center">
						<text class="cf06 mr10" @click.stop="handEdit(row)">编辑</text>
						<text class="cf06 mr10" @click.stop="handDel(row)">删除</text>
					</uni-td>
				</uni-tr>
			</uni-table>
			<uni-table ref="table" border stripe emptyText="暂无明细" v-if="current==1">
				<uni-tr>
					<uni-th align="center">排序</uni-th>
					<uni-th align="center">分类标签</uni-th>
					<uni-th align="center">效果</uni-th>
					<uni-th align="center">操作</uni-th>
				</uni-tr>
				<uni-tr v-for="(row, i) in list" :key="i">
					<uni-td align="center">{{ row.sort }}</uni-td>
					<uni-td align="center">
						<view class="name">{{ row.name }}</view>
					</uni-td>
					<uni-td align="center">
						<view class="labelBg" :style="[{ color: row.textColor }, { background: row.bgColor }]">
							{{ row.name }}
						</view>
					</uni-td>
					<uni-td align="center">
						<text class="cf06 mr10" @click.stop="handEdit(row)">编辑</text>
						<text class="cf06 mr10" @click.stop="handDel(row)">删除</text>
					</uni-td>
				</uni-tr>
			</uni-table>
			<view class="uni-pagination-box"><uni-pagination show-icon :page-size="queryForm.pageSize"
					:current="queryForm.pageNo" :total="total" @change="change" /></view>
		</view>
		<view class="buts bf5">
			<view class="p-0-20 mb10">
				<view class="cf bs30 tac p10 f14 wei" :style="{background:subColor,color:'#000'}" @click="handAdd">
					新增分类
				</view>
			</view>
		</view>
		<addArea ref="addArea" @save="fetchData"></addArea>
		<!-- <addFllabel ref="addLabel" @save="fetchData"></addFllabel> -->
	</view>
</template>

<script>
	import addArea from "./components/addFl.vue"
	import addFllabel from "./components/addFllabel.vue"
	export default {
		name: 'flsz',
		components: {
			addArea,
			addFllabel,
		},
		data() {
			return {
				subColor: uni.getStorageSync('subject_color'),
				current: 0,
				tabs: [{
					name: '商品分类',
					value: 'maked',
				}, {
					name: '分类标签',
					value: 'wineName',
				}],
				queryForm: {
					is_deleted: 0,
					limit: 100,
					name: "",
					page: 1
				},
				apiPage: 'goodsCatList',
				list: [],
				total: 0,
			}
		},
		onLoad() {
			this.fetchData()
		},
		computed: {},
		methods: {
			async handTab(v, i) {
				this.current = i
				this.loading = true
				this.queryForm.state = ''
				this.queryForm.pageNo = 1
				await this.fetchData()
				this.loading = false
			},
			async fetchData(type) {
				// if (this.current == 1) {
				// 	this.apiPage = 'goodsCatLabelList'
				// } else {
				// 	this.apiPage = 'goodsCatList'
				// }
				// this.status = 'loading'
				// let {
				// 	data: {
				// 		list,
				// 		pageNo,
				// 		pageSize,
				// 		total
				// 	},
				// } = await this.beg.request({
				// 	url: `${this.api[this.apiPage]}`,
				// 	data: this.queryForm,
				// })
				// // if (type != 'nextPage' || this.queryForm.pageNo == 1) {
				// // 	this.list = list
				// // } else {
				// // 	if (list.length == 0) {
				// // 		this.status = 'nomore'
				// // 		return
				// // 	}
				// // 	this.list = this.list.concat(list)
				// // }
				// this.total = total
				// this.queryForm.pageNo = pageNo
				// this.queryForm.pageSize = pageSize
				// this.list = list ? list : []
				// // this.status = 'loadmore'
				this.status = 'loading'
				this.beg.request({
					url: '/admin/product.ProductClass/index',
					method: 'post',
					data: this.queryForm
				}).then(res => {
					console.log(res)
					this.list = res.data.data
				})
			},
			change(e) {
				this.queryForm.pageNo = e.current;
				this.fetchData()
			},
			handDel(v) {
				uni.showModal({
					title: '温馨提示',
					content: '你确定要删除当前项吗',
					success: async (res) => {
						if (res.confirm) {
							let {
								msg
							} = await this.beg.request({
								url: '/admin/product.ProductClass/deleted',
								method: "POST",
								data: {
									id: v.id,
									is_deleted: 1
								}
							})
							this.fetchData()
							uni.$u.toast(msg)
						}
					}
				});
			},
			rfTime(v) {
				if (v) {
					this.$refs['addArea'].rfTime(JSON.parse(v))
				}
			},
			handEdit(row) {
				if (this.current == 0) {
					this.$refs['addArea'].open(row)
				} else {
					this.$refs['addLabel'].open(row)
				}
			},
			handAdd() {
				// if (this.current == 0) {
				this.$refs['addArea'].open()
				// } else {
				// 	this.$refs['addLabel'].open()
				// }
			},
		},
	}
</script>
<style scoped lang="scss">
	.tabs {
		padding: 5rpx 0 0 0;
		border-radius: 15rpx;

		.tab {
			padding: 15rpx;
			width: 50%;
			color: #666;
		}

		.isTab {
			border-radius: 15rpx;
			font-weight: 600;
		}

		.line {
			margin-top: 10rpx;
			width: 30rpx;
			height: 8rpx;
			margin-left: 12rpx;
		}
	}

	.buts {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
	}

	.pplg {
		width: 40rpx;
		height: 40rpx;
		border-radius: 10rpx;
	}

	.labelBg {
		text-align: center;
		padding: 2px 8px;
		width: fit-content;
		margin: 0 auto;
	}

	.r_logo {
		display: inline-block;
		margin-top: 5px;
		margin-right: 5px;
		padding: 1px 4px;
		color: #136ffe;
		background-color: #f0faff;
		text-align: center;
		line-height: 18px;
		font-size: 12px;
	}

	.tags {
		display: inline-block;
		margin-top: 5px;
		margin-right: 5px;
		padding: 1px 4px;
		color: #67c23a;
		background-color: #f0f9eb;
		text-align: center;
		line-height: 18px;
		font-size: 12px;
	}
</style>